class EnvatoMarketCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.item = this.hasAttribute('item') ? this.getAttribute('item') : null;
    this.render();
  }

  disconnectedCallback() {}

  render() {
    const { shadowRoot, item } = this;
    console.log(JSON.stringify(item, null, 2));
    shadowRoot.innerHTML = `<style>
      
    </style>
    <div class="item-card">
      <h1 id="title">Hello world</h1>
      <div id="content" class="content">
        <p>This is content in the body of our card</p>
        ${item ? `<p>You want to render item ID: ${item}</p>` : "<p>You didn't specify an item ID&hellip;</p>"}
      </div>
    </div>`;
  }
}

customElements.define('envato-market-card', EnvatoMarketCard);